<template>
  <div class="app-container">
    <div class="mainbox">
      <div class="filter-container">
        <el-form ref="filterFormRef" :model="filterForm" :inline="true">
          <el-form-item label="任务名称" prop="timerName">
            <el-input v-model.trim="filterForm.timerName" maxlength="30" clearable
                      placeholder="请输入内容" class="filter-item limit" @keyup.enter.native="handleFilter" />
          </el-form-item>
          <el-form-item label="执行状态" prop="status">
            <el-select v-model.trim="filterForm.status" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.dictCode"
                :label="item.dictName"
                :value="item.dictCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="执行时间" prop="allDate">
            <el-date-picker
              v-model="allDate"
              style="max-width: 100%;"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="changeTime"
            />
          </el-form-item>
        </el-form>
        <div class="flex-1" />
        <el-button type="primary" @click="handleFilter">搜索</el-button>
        <el-button @click="handleReset"> 重置</el-button>
      </div>
      <!-- 表格 -->
      <div class="table-container table-fullscreen">
        <div class="table-opt-container">
          <el-button v-permission="['TASK_LOG_CLEAR_BUTTON']" type="danger" icon="el-icon-delete"
                     @click="onClear">日志清理</el-button>
          <div class="flex-1" />
          <dt-dialog-column :columns="columns" @queryTable="getList" />
        </div>
        <el-table
          ref="table"
          :data="tableData"
          row-key="logId"
          style="width: 100%"
          :header-cell-style="headerCellStyle"
          border
        >
          <template slot="empty">
            <p>{{ $store.getters.dataText }}</p>
          </template>
          <el-table-column
            fixed="left"
            type="index"
            label="序号"
            width="70"
            :index="table_index"
          />
          <el-table-column
            v-if="columns[0].show"
            key="ltgCode"
            prop="ltgCode"
            label="日志编号"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            v-if="columns[1].show"
            key="timerName"
            prop="timerName"
            label="任务名称"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            v-if="columns[2].show"
            key="status"
            prop="status"
            label="执行状态"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <el-tag :type="scope.row.status | statusFilter">
                {{ scope.row.status == 0 ? '成功': scope.row.status == 1 ? '失败': '执行中' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            v-if="columns[3].show"
            key="jobBeginTime"
            prop="jobBeginTime"
            label="开始时间"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            v-if="columns[4].show"
            key="jobEndTime"
            prop="jobEndTime"
            label="结束时间"
            :show-overflow-tooltip="true"
          />
          <el-table-column :key="Math.random()" fixed="right" label="操作"
                           class-name="small-padding fixed-width" width="84" align="center">
            <template slot-scope="scope">
              <el-button
                v-permission="['TASK_LOG_DETAIL_BUTTON']"
                size="mini"
                @click="handleDetail(scope.row)"
              >详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <dt-pagination
          v-show="totalRows > 0"
          :total="totalRows"
          :page.sync="filterForm.pageNo"
          :limit.sync="filterForm.pageSize"
          @pagination="getList"
        />
      </div>
      <taskLogDetail ref="taskLogDetailRef" />
      <taskLogClear ref="taskLogClearRef" />
    </div>
  </div>
</template>
<script>
import taskLogApi from '@/framework/api/taskLog'
import dialogColumn from '@/framework/utils/mixins/dialogColumn'
import taskLogDetail from '@/framework/views/system/log/TaskLog/components/taskLogDetail'
import taskLogClear from '@/framework/views/system/log/TaskLog/components/taskClear'

export default {
  name: 'TaskLog',
  filters: {
    statusFilter(status) {
      const filter = { 0: 'success', 1: 'danger', 2: 'danger' }
      return filter[status]
    }
  },
  components: { taskLogDetail, taskLogClear },
  mixins: [dialogColumn],
  data() {
    return {
      options: [],
      allDate: '',
      filterForm: {
        taskName: '',
        status: '',
        // jobBeginTime: '',
        // jobEndTime: '',
        beginTime: '',
        endTime: '',
        pageNo: 1,
        pageSize: 10
      },
      tableData: [],
      totalRows: 0,
      totalPage: 0,
      log: {},
      headerCellStyle: {
        backgroundColor: '#f2f2f2'
      },
      // 列信息
      columns: [
        { prop: 'ltgCode', label: '日志编号', show: true },
        { prop: 'timerName', label: '任务名称', show: true },
        { prop: 'status', label: '执行状态', show: true },
        { prop: 'beginTime', label: '开始时间', show: true },
        { prop: 'endTime', label: '结束时间', show: true }
      ]
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      this.initDate()
      this.getList()
      this.getDictList()
    },
    initDate() {
      // 时间初始化
      const num = parseInt(180 * 24 * 3600 * 1000)
      const days = new Date()
      const end = `${days.getFullYear()}-${days.getMonth() + 1}-${days.getDate()}`
      const dayend = new Date()
      dayend.setTime(dayend.getTime() - num)
      const start = `${dayend.getFullYear()}-${dayend.getMonth() + 1}-${dayend.getDate()}`
      this.allDate = [`${start} 00:00:00`, `${end} 23:59:59`]
    },
    getList() {
      if (this.allDate) {
        this.filterForm.beginTime = this.allDate[0]
        this.filterForm.endTime = this.allDate[1]
      }
      taskLogApi.getTaskLogList(this.filterForm).then((resp) => {
        this.tableData = [...resp.data.rows]
        this.totalRows = resp.data.totalRows
        this.totalPage = resp.data.totalPage
      })
    },

    handleReset() {
      this.$refs.filterFormRef.resetFields('filterFormRef')
      this.initDate()
      this.handleFilter()
    },
    changeTime(val) {
      if (!val) {
        this.allDate = []
      } else {
        this.allDate = val
      }
    },
    handleFilter() {
      this.filterForm.pageNo = 1
      this.getList()
    },
    // 获取字典表
    getDictList() {
      taskLogApi.getDictList({
        dictTypeCode: 'log_status'
      }).then((res) => {
        this.options = res.data
      })
    },
    // 日志清理
    onClear() {
      this.$refs.taskLogClearRef.openDialog()
    },
    // 详情
    handleDetail(row) {
      this.$refs.taskLogDetailRef.openDialog(row)
    },
    table_index(index) {
      return (this.filterForm.pageNo - 1) * this.filterForm.pageSize + index + 1
    }
  }
}
</script>
<style lang="scss" scoped>
    .log{
    }
    .el-table .cell {
      white-space: nowrap;
    }
    .dialog-footer{
      text-align: center;
    }
    .table-header{
      background-color: chartreuse;
    }
</style>
